<%@ include file="../includes/topInclude.jsp" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>

<script type="text/javascript" src="js/userScript.js" ></script>
<script type="text/javascript">
    function validateSubmit(){
        if (document.contactFormHtml.contact.firstName.value ==""){
            alert("The First Name is mandatory");
            return false;
        }
    }
    function validateNewNumber(){
          var newNumAdded = document.contactFormHtml.newNumber.value;       
          var newRefAdded = document.contactFormHtml.newReference.value;
          var flag = true;
          
          if ( newNumAdded =="" ) {
                alert("The number is a mandatory field");
                document.contactFormHtml.newNumber.focus();
                flag = false;
          }
          else if (newRefAdded == ""){
                alert("The Reference is mandatory field");
                document.contactFormHtml.newReference.focus();
                flag = false;                
          }
         return flag;       
    }
    
    function cleanFields(){
     document.contactFormHtml.newNumber.value ="";
     document.contactFormHtml.newMandatory.checked = false;
     document.contactFormHtml.newReference.value ="";
    }
    
    function addRowNumber(){
        var theTable, theTableBody
        theTable = (document.all) ? document.all.myTABLE : document.getElementById("myTABLE");
        theTableBody = theTable.tBodies[0];
        
        var newNumAdded = document.contactFormHtml.newNumber.value;
        var newMandAdded = document.contactFormHtml.newMandatory.checked;
         var newRefAdded = document.contactFormHtml.newReference.value;
         var rowCount = document.contactFormHtml.countNumbers.value;
         
         if (!validateNewNumber()){
                return;
         }
        
         //alert ("VAlue  " + newMandAdded);
        var nowData = ["<input type='text' name='contactForm.contact.numbers["+ rowCount +"].number' value='"+ newNumAdded +"'  />", 
        "<input type='checkbox' name='contactForm.contact.numbers["+ rowCount +"].mandatory' value='Y'  "+ ((newMandAdded)? "checked  " : "") +" />",
        "<input type='text' name='contactForm.contact.numbers["+ rowCount +"].reference' value='"+ newRefAdded +"'  />"];
        
         document.contactFormHtml.countNumbers.value = (rowCount * 1 ) + 1;
            
            
        var newCell;
        var newRow = theTableBody.insertRow(-1);
        for (var i = 0; i < nowData.length; i++) {
            newCell = newRow.insertCell(i)
            newCell.innerHTML = nowData[i]
           // newCell.style.backgroundColor = "salmon"
        }
        cleanFields();
      }
                                                                                                                     
</script>
<!-- Support for Spring errors object -->
<!--spring:bind path="contactForm.*">
<c:forEach var="error" items="${status.errorMessages}">
    <B><FONT color=RED>
    <BR><c:out value="${error}"/>
    </FONT></B>
</c:forEach>
spring:bind -->

    <div id="content">
        <div class="post">
            <div class="title">
                <h2>Contacts Form</h2>
                <p></p>
            </div>
            <div class="entry">                  
                
                <form:form name="contactFormHtml" commandName="contactForm" >
                <table>
                    <tr>
                        <td>First Name</td>
                        <td>        
                            <form:input path="contact.firstName" />          
                        </td>
                        <td><form:errors path="contact.firstName" /></td>
                    </tr>    
                    <tr>
                        <td>Last Name</td>
                        <td>
                            <form:input path="contact.lastName" />             
                        </td>
                        <td><form:errors path="contact.lastName" /></td>
                    </tr>    
                    <tr>
                        <td>Address</td>
                        <td>
                            <form:input path="contact.address" />               
                        </td>
                    </tr>    
                    <tr>
                        <td>Groups</td>
                        <td>
                            <form:select path="contact.groupList" multiple="false" >             
                                <form:options items="${myGroupList}" itemValue="id" itemLabel="groupName"/>
                            </form:select>          
                        </td>
                        <td><form:errors path="contact.groupList" /></td>
                    </tr>    
                </table>
                Numbers of Contacts
                <table>  
                    <tr>
                        <td><input type="text" name="newNumber" value="" /></td>
                        <td><input type="checkbox" name="newMandatory" value="" /></td>
                        <td><input type="text" name="newReference" value="" /><input type="button" value="add" onclick="addRowNumber();" /></td>
                    </tr>
                    <tr>
                        <td>Number</td>
                        <td>Mandatoty</td>
                        <td>Description</td>
                    </tr>
                    <tr>
                        <table id="myTABLE" border="1">
                            <tbody>                    
                                <c:set var="i" value="0" />
                                <c:forEach items="${contactForm.contact.numbers}"  var="group" varStatus="numberRow">                         
                                    <c:set var="i" value="${i + 1}" />
                                    <tr>
                                        
                                        <spring:bind path="contact.numbers[${numberRow.index}].id">                                    
                                            <input type="hidden" name="<c:out value="${status.expression}"/>"
                                                   id="<c:out value="${status.expression}"/>"
                                                   value="<c:out value="${status.value}"/>" />
                                        </spring:bind>
                                        
                                        <td>
                                            <spring:bind path="contact.numbers[${numberRow.index}].number">
                                                <!--c:out value="${status.value}"/-->
                                                <input type="text" name="<c:out value="${status.expression}"/>"
                                                       id="<c:out value="${status.expression}"/>"
                                                       value="<c:out value="${status.value}"/>" />
                                            </spring:bind>
                                        </td>
                                        <td>
                                            <spring:bind path="contact.numbers[${numberRow.index}].mandatory">
                                                <!--c:out value="${status.value}"/-->
                                                <input type="checkbox" name="<c:out value="${status.expression}"/>"
                                                       id="<c:out value="${status.expression}"/>"
                                                       <c:if test="${status.value == 'Y'}">checked</c:if> 
                                                       value="<c:out value="${status.value}"/>" />
                                            </spring:bind>
                                        </td>
                                        <td>
                                            <spring:bind path="contact.numbers[${numberRow.index}].reference">
                                                <!--c:out value="${status.value}"/-->
                                                <input type="text" name="<c:out value="${status.expression}"/>"
                                                       id="<c:out value="${status.expression}"/>"
                                                       value="<c:out value="${status.value}"/>" />
                                            </spring:bind>
                                        </td>
                                    </tr>            
                                </c:forEach>
                            </tbody>
                        </table>
                        <form:errors path="contact.numbers" />
                    </tr>               
                    <tr>
                        <td><form:hidden  path="countNumbers" /></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            <input type="submit" value="save" />
                        </td>
                    </tr>
                </table>
            </div>
            <br/>
            <p class="links"> <a href="#" class="more">List of Contacts</a>  </p> 
            <table>
              
                <tr>
                    <th>
                        First Name
                    </th>
                    
                    <th>
                        Last Name
                    </th>
                </tr>
                <c:forEach var="contact" items="${lstContact}" >
                    <tr>
                        <td>
                        <a href="<c:url value=""><c:param name="contactAction" value="${contact.id}"/><c:param name="groupAction" value="${contact.groupId}"/></c:url>"><c:out value="${contact.firstName}"/></a></td>
                        
                        <td><c:out value="${contact.lastName}"/></td> 
                        
                    </tr>   
                </c:forEach> 
            </table>
        </div>
    </div>
    
    
    
    <form:hidden path="contact.id" />    
    <input type="hidden" name="groupAction" value="" />
    
</form:form>
<script>
     document.contactFormHtml.countNumbers.value =${i};
</script>
<%@ include file="../includes/bottomInclude.jsp" %>